<template>
  <div class="container">
    <!--<el-row class="wrap-search">-->
    <!--<el-button @click="" type="primary" size="medium" @click="delAll">批量删除</el-button>-->
    <!--</el-row>-->
    <el-row class="wrap-search">
      <div class="search-item">
        <div class="search-title">状态：</div>
        <el-select
          v-model="configList.param.status"
          placeholder="请选择"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-item">
        <div class="search-title">手机号：</div>
        <el-input v-model="configList.param.phone_num"></el-input>
      </div>
      <el-button
        icon="el-icon-search"
        class="search-btn"
        type="primary"
        @click="getList()"
      >查询</el-button>
    </el-row>
    <div class="">
      <table-list
        ref="tableList"
        :tableConfig='configList'
        @selectTable="selectTable"
      >
        <el-table-column
          slot="select"
          align="center"
          label="全选"
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          slot="image"
          align="center"
          label="用户头像"
        >
          <template slot-scope="scope">
            <!--<img class="video-img" :src="scope.row.avatarUrl" alt="">-->
            <div
              :style="{backgroundImage: 'url('+scope.row.verified_image+')'}"
              style="width: 60px;height: 60px;background-size: cover;border-radius: 30px;margin: 0 auto;"
            ></div>
          </template>
        </el-table-column>
        <el-table-column
          slot="status"
          align="center"
          label="订单状态"
        >
          <template slot-scope="scope">
            <div>{{scope.row.status == 0 ? '待处理' : (scope.row.status == 1 ? '审核通过' : (scope.row.status == 2 ? '审核未通过' : ''))}}</div>
          </template>
        </el-table-column>
        <el-table-column
          slot="created_at"
          align="center"
          label="时间"
          width="200px"
        >
          <template slot-scope="scope">
            <div>{{_dateFormate(scope.row.created_at)}}</div>
          </template>
        </el-table-column>
        <el-table-column
          class="btn"
          width="200px"
          label="操作"
          slot="btn"
          align="center"
        >
          <template slot-scope="scope">
            <!--<el-button  @click="$router.push('/rechargeDetail?id='+scope.row.id)" type="primary" size="small">查看详情</el-button>-->
            <el-button
              icon="el-icon-info"
              @click="handleClickDetail(scope.row.id)"
              type="primary"
              size="small"
            >查看详情</el-button>
            <!--<div v-if="scope.row.status == 0">-->
            <!--<el-button  @click="handleVerify(scope.row.id, 1, scope.row.val)" type="primary" size="small">审核通过</el-button>-->
            <!--<el-button  @click="handleVerify(scope.row.id, 2, scope.row.val)" type="primary" size="small">审核不通过</el-button>-->
            <!--</div>-->
            <!--<el-button type="success" size="small" v-else-if="scope.row.status == 1">审核已通过</el-button>-->
            <!--<el-button type="danger" size="small" v-else-if="scope.row.status == 2">审核未通过</el-button>-->
          </template>
        </el-table-column>
      </table-list>
    </div>
    <!--<el-dialog-->
    <!--:visible.sync="dialogVisible"-->
    <!--size="tiny"-->
    <!--&gt;-->
    <!--<img :src="imgUrl" alt="">-->
    <!--</el-dialog>-->
    <el-dialog
      :visible.sync="dialogModalVisible"
      size="tiny"
    >
      <div class="wrap">
        <div class="flex-box-container item">
          <div>信息图:</div>
          <div @click="dialogVisible = true">
            <img
              :src="detail.verified_image"
              alt=""
              style="width:150px;"
            >
          </div>
        </div>
        <div class="flex-box-container item">
          <div>充值金额:</div>
          <el-input
            v-model="value"
            placeholder="请输入充值金额"
            style="width: 150px;"
            v-if="detail.status == 0"
          ></el-input>
          <el-input
            v-model="detail.val"
            placeholder="请输入充值金额"
            style="width: 150px;"
            disabled
            v-else
          ></el-input>
        </div>
        <div class="flex-box-container item">
          <div>审核状态:</div>
          <div>
            {{detail.status == 0 ? '待处理' : (detail.status == 1 ? '审核通过' : (detail.status == 2 ? '审核未通过' : ''))}}
          </div>
        </div>
        <div v-if="detail.status == 0">
          <el-button
            @click="handleVerify(1)"
            type="primary"
            size="small"
          >审核通过</el-button>
          <el-button
            @click="handleVerify(2)"
            type="danger"
            size="small"
          >审核不通过</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="信息图"
      custom-class="w30"
      size="tiny"
      :visible.sync="dialogVisible"
    >
      <img
        :src="detail.verified_image"
        alt=""
        style="width: 250px;"
      >
    </el-dialog>
  </div>
</template>

<script>
let CONSTANT = require("../constant/constant.js");
let common = require("../common.js");
import TableList from "./common/my-table";
export default {
  data() {
    return {
      detail: {},
      value: "",
      dialogModalVisible: false,
      configList: {
        url: CONSTANT.URL.recharge,
        configList: [
          {
            slot: "select"
          },
          {
            label: "用户ID",
            prop: "phone_num"
          },
          {
            label: "充值金额",
            prop: "val"
          },
          {
            label: "钱包地址",
            prop: "usdt_address"
          },
          {
            slot: "created_at"
          },
          {
            slot: "status"
          },
          {
            slot: "btn"
          }
        ],
        param: {
          status: "",
          phone_num:''
        },
        type: "",
        width: "",
        isPagination: true
      },
      dialogVisible: false,
      dialogVisible1: false,
      imgUrl: "",
      upLoadUrl: "",
      statusList: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "待处理",
          value: 0
        },
        {
          label: "通过",
          value: 1
        },
        {
          label: "未通过",
          value: 2
        }
      ]
    };
  },
  components: {
    "table-list": TableList
  },
  watch: {
    "configList.param.provinceCode": function(val) {
      this.cityList = [];
      this.configList.param.cityCode = "";
      //            this.getCityList()
    }
  },
  created() {},
  mounted() {
    console.log(this.configList);
  },
  methods: {
    getList() {
      this.$refs.tableList.getList();
    },
    _dateFormate(value) {
      return common.dateFormate(value);
    },
    handleClickDetail(id) {
      this.dialogModalVisible = true;
      this.getDetail(id);
    },
    getDetail(id) {
      let url = CONSTANT.URL.rechargeDetail;
      common.requestGetAjax(url, {}, { log_id: id }, res => {
        if (res.status == 0) {
          this.detail = res.data;
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
      });
    },
    handleVerify(status) {
      if (!this.value) {
        this.$message({
          type: "warning",
          message: "请输入充值金额"
        });
        return false;
      }
      let url = CONSTANT.URL.rechargeVerify,
        param = { log_id: this.detail.id, status: status, var: this.value };
      common.requestAjax(url, param, {}, res => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: status == 1 ? "审核通过" : status == 2 ? "审核不通过" : ""
          });
          setTimeout(() => {
            this.dialogModalVisible = false;
            this.getList();
          }, 1500);
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
      });
    },

    selectTable(val) {
      console.log(val);
      this.ids = [];
      val.map(item => {
        this.ids.push(item.id);
      });
    },
    delAll() {
      if (!this.ids.length) {
        this.$message({
          type: "warning",
          message: "请选择批量删除的记录"
        });
        return false;
      }
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.USERCORE.DELETES;
          common.requestAjax(url, {}, { ids: this.ids }, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss">
.container {
  .wrap {
    .item {
      font-size: 15px;
      margin-bottom: 30px;
      div {
        &:first-child {
          width: 100px;
        }
      }
    }
  }
  .wrap-search {
    margin-bottom: 20px;
    .search-item {
      float: left;
      margin-right: 20px;
      margin-top: 20px;
      .el-input,
      .el-select {
        width: 180px;
      }
    }
    button {
      float: left;
      margin-top: 20px;
    }
    .search-title {
      display: inline;
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: right;
      margin-bottom: 20px;
      margin-right: 10px;
    }
  }
  .el-table__row {
    .cell {
      button {
        margin-top: 10px;
      }
    }
    video {
      width: 100px;
      height: auto;
    }
    img.video-img {
      width: 60px;
      height: 60px;
      cursor: pointer;
      border-radius: 30px;
    }
  }
  .pagination {
    text-align: center;
    width: 80%;
    margin-top: 60px;
  }
  .el-dialog__body {
    img {
      display: block;
      margin: 0 auto;
    }
  }
  .user-num {
    color: #409eff;
    cursor: pointer;
  }

  .avatar {
    width: 50px !important;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
}
</style>
